<template>
  <div class="page">
    <sub-header :title="title"></sub-header>
    <div class="main">
      <ul>
        <li>收货人</li>
        <li><input type="text" placeholder="收货人姓名" v-model="name" /></li>
      </ul>
      <ul>
        <li>联系方式</li>
        <li><input type="text" placeholder="联系人手机号" v-model="cellphone" /></li>
      </ul>
      <ul>
        <li>所在地区</li>
        <li><input type="text" placeholder="请选择所在地区" class="area" readOnly :value="showArea" @click="isArea = true" /></li>
      </ul>
      <ul>
        <li>详细地址</li>
        <li><input type="text" placeholder="街道详细地址" v-model="address" /></li>
      </ul>
      <ul>
        <li><van-checkbox shape="square" :value="true" v-model="isDefault">设置为默认地址</van-checkbox></li>
      </ul>
      <button type="button" class="submit-save" @click="submit">保存</button>
    </div>
    <van-popup v-model="isArea" position="bottom"><van-area :area-list="areaList" @cancel="isArea = false" @confirm="selectArea" /></van-popup>
  </div>
</template>

<script>
import SubHeader from 'components/SubHeader';
import areaData from '../../../data/area';
import Vue from 'vue';
import { mapActions } from 'vuex';
export default {
  name: 'user-address-add',
  data() {
    return {
      name: '',
      cellphone: '',
      showArea: '',
      address: '',
      isDefault: false,
      areaList: areaData,
      isArea: false,
      province: '',
      city: '',
      area: '',
      title: this.$route.meta.title
    };
  },
  methods: {
    ...mapActions({
      addAddress: 'address/addAddress'
    }),
    selectArea(selected) {
      selected.forEach((item, index) => {
        switch (index) {
          case 0:
            this.province = item.name;
            break;
          case 1:
            this.city = item.name;
            break;
          case 2:
            this.area = item.name;
            break;
        }
      });
      this.showArea = this.province + ' ' + this.city + ' ' + this.area;
      this.isArea = false;
    },
    async submit() {
      if (this.name.match(/^\s*$/)) {
        this.$toast('请输入收件人姓名');
        return;
      }
      if (this.cellphone.match(/^\s*$/)) {
        this.$toast('请输入手机号码');
        return;
      }
      if (!this.cellphone.match(/^1\d{10}$/)) {
        this.$toast('您输入的手机号码不正确');
        return;
      }
      if (this.showArea.match(/^\s*$/)) {
        this.$toast('请选择所在地');
        return;
      }
      if (this.address.match(/^\s*$/)) {
        this.$toast('请输入收货地址');
        return;
      }

      let res = await this.addAddress({
        name: this.name,
        cellphone: this.cellphone,
        province: this.province,
        city: this.city,
        area: this.area,
        address: this.address,
        isdefault: this.isDefault ? '1' : '0'
      });
      if (res.code === 200) {
        this.$toast({
          message: '添加成功',
          onClose: () => {
            this.$router.go(-1);
          }
        });
      } else {
        this.$toast(res.data);
      }
    }
  },
  created() {
    document.title = this.title;
  },
  components: {
    SubHeader
  }
};
</script>

<style scoped>
.page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #ffffff;
}
.main {
  width: 100%;
  margin-top: 1rem;
}
.main ul {
  width: 100%;
  height: 1.02rem;
  border-bottom: #efefef 1px solid;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}
.main ul li {
  font-size: 0.32rem;
  margin-left: 0.3rem;
}
.main ul li:nth-child(2) {
  width: 62%;
  height: 100%;
}
.main ul li input[type='text'] {
  width: 100%;
  height: 95%;
  font-size: 0.32rem;
}
.main ul li .area {
  font-size: 0.28rem !important;
}
.main ul li input[type='checkbox'] {
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.3rem;
}
.main .submit-save {
  width: 85%;
  height: 0.8rem;
  background-color: #fcb40a;
  border-radius: 4px;
  margin: 0 auto;
  display: block;
  border: 0 none;
  outline: none;
  font-size: 0.32rem;
  color: #ffffff;
  margin-top: 0.4rem;
}
</style>
